<%-- Created by IntelliJ IDEA. User: Administrator Date: 2023/1/21 Time: 17:24
To change this template use File | Settings | File Templates. --%>
<%@ page
        contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>开发计划信息</title>
    <!-- 引入 样式 和 js -->
    <jsp:include page="../common/css_js.jsp"/>
    <jsp:include page="../common/table.jsp"/>
</head>
<body>
<div class="container col-lg-12 dh">
    <div class="card">
        <header class="card-header">
            <div class="card-title" style="">
                <h4><b>开发计划信息添加</b></h4>
            </div>
            <div class="col-md-6 column">
                <button type="reset" class="btn btn-info">
                    <span class="mdi mdi-refresh"></span>重置
                </button>
                <button type="button" class="btn btn-primary" onclick="toAdd()">
                    <span class="mdi mdi-checkbox-marked-outline"></span>保存
                </button>
                <button type="reset" class="btn btn-success" onclick="dev(1)">
                    <span class="mdi mdi-check"></span>开发成功
                </button>
                <button type="reset" class="btn btn-danger" onclick="dev(4)">
                    <span class="mdi mdi-close"></span>开发终止
                </button>
            </div>
        </header>
        <div class="card-body">
            <div class="row">
                <div class="col-md-9 column">
                    <!-- 新增开发计划 -->
                    <form action="#" method="post">
                        <table style="height: 220px">
                            <input
                                    type="hidden"
                                    name="saleChanceId"
                                    value="${saleChance.id}"
                            />
                            <tr>
                                <td>项目计划：</td>
                                <td>
                                    <label
                                    ><input
                                            name="planItem"
                                            class="form-control"
                                            placeholder="请输入项目计划"
                                    /></label>
                                </td>
                                <td>&nbsp;&nbsp;计划时间：</td>
                                <td>
                                    <label>
                                        <input
                                                class="form-control"
                                                type="text"
                                                style="width: 150px"
                                                data-provide="datepicker"
                                                name="planDate"
                                                placeholder="请输入计划时间"
                                                data-today-highlight="true"
                                                data-autoclose="false"
                                        />
                                    </label>
                                </td>
                            </tr>
                            <tr>
                                <td>执行效果：</td>
                                <td colspan="3">
                                    <label>
                        <textarea
                                name="exeAffect"
                                cols="58"
                                rows="2"
                                class="form-control"
                                placeholder="请输入执行结果"
                        ></textarea>
                                    </label>
                                </td>
                            </tr>
                            <tr>
                                <td>是否有效：</td>
                                <td>
                                    <div
                                            class="custom-control custom-radio custom-control-inline"
                                    >
                                        <input
                                                type="radio"
                                                id="customRadioInline1"
                                                name="isValid"
                                                value="1"
                                                class="custom-control-input"
                                                checked="checked"
                                        />
                                        <label
                                                class="custom-control-label"
                                                for="customRadioInline1"
                                        >有效</label
                                        >
                                    </div>
                                    <div
                                            class="custom-control custom-radio custom-control-inline"
                                    >
                                        <input
                                                type="radio"
                                                id="customRadioInline2"
                                                name="isValid"
                                                value="0"
                                                class="custom-control-input"
                                        />
                                        <label
                                                class="custom-control-label"
                                                for="customRadioInline2"
                                        >无效</label
                                        >
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- 营销机会基本信息 -->
    <div class="card">
        <header class="card-header">
            <div class="card-title">
                <h4><b>营销机会信息</b></h4>
            </div>
        </header>
        <div class="card-body">
            <table id="tab">
                <tr>
                    <td>客户名称：</td>
                    <td>
                        <label
                        ><input
                                class="form-control"
                                name="customer_name"
                                value="${saleChance.customerName}"
                                readonly="readonly"
                        /></label>
                    </td>
                    <td>机会来源：</td>
                    <td>
                        <label
                        ><input
                                class="form-control"
                                name="chance_source"
                                value="${saleChance.chanceSource}"
                                readonly="readonly"
                        /></label>
                    </td>
                </tr>
                <tr>
                    <td>联系人：</td>
                    <td>
                        <label
                        ><input
                                class="form-control"
                                name="linkage_man"
                                value="${saleChance.linkageMan}"
                                readonly="readonly"
                        /></label>
                    </td>
                    <td>联系人电话：</td>
                    <td>
                        <label
                        ><input
                                class="form-control"
                                name="linkage_phone"
                                value="${saleChance.linkagePhone}"
                                readonly="readonly"
                        /></label>
                    </td>
                </tr>
                <tr>
                    <td>概要：</td>
                    <td>
                        <label
                        ><input
                                class="form-control"
                                name="overview2"
                                value="${saleChance.overview}"
                                readonly="readonly"
                        /></label>
                    </td>
                    <td>成功几率(%)：</td>
                    <td>
                        <label
                        ><input
                                class="form-control"
                                name="cgjl2"
                                value="${saleChance.cgjl}"
                                readonly="readonly"
                        /></label>
                    </td>
                </tr>
            </table>
        </div>
    </div>

    <style>
        #tab {
            font-size: 18px;
            margin: 0 auto;
            width: 1100px;
            height: 180px;
        }

        #tab tr td:first-child {
            width: 150px;
            text-align: right;
            font-weight: bolder;
        }

        #tab tr td:nth-child(3) {
            text-align: right;
            font-weight: bolder;
        }

        #tab input {
            width: 280px;
            background-color: white;
        }
    </style>

    <!-- 开发计划信息 -->
    <div class="card">
        <header class="card-header">
            <div class="card-title">
                <h4><b id="title">开发计划信息列表</b></h4>
            </div>
        </header>
        <div class="card-body">
            <!-- 条件查询表单 -->
            <form
                    class="form-inline"
                    name="form1"
                    action="#"
                    method="post"
                    id="toolbar"
            >
                <!-- 操作 -->
                <div style="gap: 2px" id="contr">
                    <a class="btn btn-primary" onclick="query()">
                        <span class="mdi mdi-table-large"></span>显示所有
                    </a>
                </div>
                <b class="ml-2">项目计划：</b>
                <label>
                    <input name="planItem" class="form-control" placeholder="请输入项目计划"/>
                </label>
                <b class="ml-2">计划时间：</b>
                <label>
                    <input
                            class="form-control"
                            type="text"
                            style="width: 150px"
                            data-provide="datepicker"
                            name="planDateMin"
                            placeholder="请输入开始时间"
                            data-today-highlight="true"
                            data-autoclose="false"
                    />
                </label>
                &nbsp;—&nbsp;
                <label>
                    <input
                            class="form-control"
                            type="text"
                            style="width: 150px"
                            data-provide="datepicker"
                            name="planDate"
                            placeholder="请输入结束时间"
                            data-today-highlight="true"
                            data-autoclose="false"
                    />
                </label>
                <button type="button" class="btn btn-primary ml-2" onclick="like()">
                    <span class="mdi mdi-table-search"></span>搜索
                </button>
        </div>
        </form>
        <!-- 数据显示 -->
        <div class="table-responsive">
            <table id="table"></table>
        </div>
        <br/>
        <div class="col-md-4 column">
            <!-- 操作 -->
            <a class="btn btn-primary" href="${ctx}/page/dev-plan"
            ><span class="mdi mdi-keyboard-backspace"></span>返回</a
            >
        </div>
    </div>
</div>
</div>

<!-- Modal -->
<div
        class="modal fade bd-example-modal-lg"
        id="myModal"
        tabindex="-1"
        role="dialog"
        aria-labelledby="myModalLabel"
>
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">修改开发计划信息</h4>
                <div class="col-md-2 column"></div>
                <div class="col-md-4 column" id="close"></div>
                <button
                        type="button"
                        class="close"
                        data-dismiss="modal"
                        aria-label="Close"
                >
                    <a aria-hidden="true">&times;</a>
                </button>
            </div>
            <div class="modal-body" style="background-color: #f8faf7">
                <!-- 增加修改表单 -->
                <div class="table-responsive">
                    <form>
                        <table class="table table-bordered table-hover" id="tab333">
                            <input type="hidden" name="id"/>
                            <input type="hidden" name="saleChanceId"/>
                            <tr>
                                <td>项目计划：</td>
                                <td>
                                    <label
                                    ><input
                                            name="planItem"
                                            class="form-control"
                                            placeholder="请输入项目计划"
                                    /></label>
                                </td>
                                <td>&nbsp;&nbsp;计划时间：</td>
                                <td>
                                    <label>
                                        <input
                                                class="form-control"
                                                type="text"
                                                data-provide="datepicker"
                                                name="planDate"
                                                placeholder="请输入计划时间"
                                                data-today-highlight="true"
                                                data-autoclose="false"
                                        />
                                    </label>
                                </td>
                            </tr>
                            <tr>
                                <td>执行效果：</td>
                                <td colspan="3">
                                    <label>
                        <textarea
                                name="exeAffect"
                                cols="58"
                                rows="2"
                                class="form-control"
                                placeholder="请输入执行结果"
                        ></textarea>
                                    </label>
                                </td>
                            </tr>
                            <tr>
                                <td>是否有效：</td>
                                <td>
                                    <div
                                            class="custom-control custom-radio custom-control-inline"
                                    >
                                        <input
                                                type="radio"
                                                id="customRadioInline3"
                                                name="isValid"
                                                value="1"
                                                class="custom-control-input"
                                                checked="checked"
                                        />
                                        <label
                                                class="custom-control-label"
                                                for="customRadioInline3"
                                        >有效</label
                                        >
                                    </div>
                                    <div
                                            class="custom-control custom-radio custom-control-inline"
                                    >
                                        <input
                                                type="radio"
                                                id="customRadioInline4"
                                                name="isValid"
                                                value="0"
                                                class="custom-control-input"
                                        />
                                        <label
                                                class="custom-control-label"
                                                for="customRadioInline4"
                                        >无效</label
                                        >
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    关闭
                </button>
                <button
                        type="button"
                        id="btn111"
                        class="btn btn-primary"
                        onclick="update()"
                >
                    修改
                </button>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    // 加载事件
    $(function () {
        // 状态格式化
        if ('${saleChance.devResult}' === '1') {
            $("#title").append("（<span class='text-success'>状态：开发成功</span>）</b>");
            $(".card:eq(0)").remove();
        } else if ('${saleChance.devResult}' === '2') {
            $("#title").append("（<span class='text-info'>状态：开发中</span>）</b>");
            $("#contr").append('<a class="btn btn-danger" href="#" onclick="batchDelete(\'dev-plan\')"><span class="mdi mdi-delete"></span>批量删除</a>');
            $(".card:eq(1)").remove();
        } else if ('${saleChance.devResult}' === '3') {
            $("#title").append("（<span class='text-warning'>状态：未开发</span>）</b>");
            $("#contr").append('<a class="btn btn-danger" href="#" onclick="batchDelete(\'dev-plan\')"><span class="mdi mdi-delete"></span>批量删除</a>');
            $(".card:eq(1)").remove();
        } else if ('${saleChance.devResult}' === '4') {
            $("#title").append("（<span class='text-danger' >状态：开发失败</span>）</b>");
            $(".card:eq(0)").remove();
        } else {
            $("#title").append("开发计划信息");
        }

        // 初始化表格
        $('#table').bootstrapTable({
            classes: 'table table-bordered table-hover table-striped text-nowrap',    // 表格样式
            url: '${ctx}/dev-plan/list?saleChanceId=${saleChance.id}',     // 请求后台的URL
            method: 'GET',      // 请求方式
            toolbar: "#toolbar",
            pagination: true,   //是否显示分页条
            pageNumber: 1,      // 首页页码，默认为1
            pageSize: 5,        //一页显示的行数
            paginationLoop: false,   //是否开启分页条无限循环，最后一页时点击下一页是否转到第一页
            pageList: [5, 10, 20],   //选择每页显示多少行，数据过少时可能会没有效果
            clickToSelect: true, // 是否启用点击选中行
            undefinedText: '-', // 当字段为 undefined 显示
            sortOrder: "asc", // 排序方式
            showColumns: true, // 是否显示所有的列
            showRefresh: true, // 是否显示刷新按钮
            showToggle: true, // 是否显示详细视图和列表视图的切换按钮(clickToSelect同时设置为true时点击会报错)
            showExport: true,        // 是否显示导出按钮, 导出功能需要导出插件支持(tableexport.min.js)
            exportDataType: "all", // 导出数据类型, 'basic':当前页, 'all':所有数据, 'selected':选中的数据
            // 响应处理
            responseHandler: function (res) {
                if (res.code !== 200) {
                    notify("mdi mdi-close", res.message, "danger");
                    return [];
                }
                return res.data;
            },
            // 查询参数
            queryParams: function () {                // 查询条件
                return $("[name='form1']").serializeArray();    // 得到条件查询表单中所有的值
            },
            columns: [{             // 列
                field: 'example',
                checkbox: true      // 是否显示复选框
            }, {
                field: 'no',   // 属性名
                align: 'center',    // 对齐方式
                title: '序号',   // 标题
                formatter: function (value, row, index) {
                    return index + 1;
                }
            }, {
                field: 'id',
                title: '编号',
                visible: false
            }, {
                field: 'planItem',
                align: 'center',
                title: '项目计划'
            }, {
                field: 'planDate',
                align: 'center',
                title: '计划时间'
            }, {
                field: 'exeAffect',
                align: 'center',
                title: '执行结果'
            }, {
                field: 'isValid',
                align: 'center',
                title: '是否有效',
                formatter: function (value, row, index) {     // 格式化
                    if (row.isValid === 1) {
                        return "<span class='badge badge-success'>有效</sapn>";
                    } else if (row.isValid === 0) {
                        return "<span class='badge badge-danger'>无效</span>";
                    } else {
                        return "<span class='badge badge-info'>-</span>";
                    }
                }
            }, {
                field: 'createDate',
                align: 'center',
                title: '创建时间'
            }, ii()],
            onLoadSuccess: function () {      // 数据加载成功时调用的方法
                // 滚动到最底部
                let h = $(document).height() - $(window).height();
                $('body').animate({scrollTop: h}, 1500);
            },
            onLoadError: function () {        // 数据加载失败时调用的方法
                setTimeout(function () {
                    notify("mdi mdi-close", "数据加载失败!", "danger");
                }, 300);
            },
            onCheck: function () {        // 复选框单击事件
                getSelections();
            }
        });
    })


    // 操作按钮
    function ii() {
        if ("${saleChance.devResult}" !== '1' && "${saleChance.devResult}" !== '4') {
            return {
                field: 'operate',
                align: 'center',
                title: '操作',
                formatter: btnGroup,
                events: {               // 事件
                    'click .edit-btn': function (event, value, row, index) {
                        edit(row);
                    },
                    'click .del-btn': function (event, value, row, index) {
                        remove('dev-plan', row.id)
                    }
                }
            };
        }
    }


    // 消息弹框
    function notify1(icon, msg, type) {
        $.notify({
            icon: icon,
            message: msg
        }, {
            element: 'body',
            z_index: 2000,
            type: type,
            placement: {
                from: 'top',
                align: 'left'
            },
            delay: 3000
        });
    }

    // 操作方法 - 显示所有
    function query() {
        $("form")[1].reset();
        $('#table').bootstrapTable("refresh", {pageNumber: 1});
    }

    // 操作方法 - 新增
    function toAdd() {
        let b = false;

        let $planItem = $("[name='planItem']:eq(0)");
        let $planDate = $("[name='planDate']:eq(0)");
        let $exeAffect = $("[name='exeAffect']:eq(0)");

        if ($planItem.val() === '') {
            notify1("mdi mdi-close", "项目计划为必填项!", "danger");
            $planItem.focus();
        } else if ($planDate.val() === '') {
            notify1("mdi mdi-close", "计划时间为必填项!", "danger");
            $planDate.focus();
        } else if ($exeAffect.val() === '') {
            notify1("mdi mdi-close", "执行结果为必填项!", "danger");
            $exeAffect.focus();
        } else {
            b = true;
        }

        if (b) {
            let obj = $("form:eq(0)").serializeArray();
            saveOrUpdate("${ctx}/dev-plan/save", obj)
            $("form")[0].reset();
        }
    }

    // 操作方法 - 编辑
    function edit(r) {
        // 模态框显示
        $("#myModal").modal("show");
        // 赋值
        $("[name='id']").val(r.id);
        $("[name='saleChanceId']:eq(1)").val(r.saleChanceId);
        $("[name='planItem']:eq(2)").val(r.planItem);
        $("[name='planDate']:eq(2)").val(r.planDate);
        $("[name='exeAffect']:eq(1)").val(r.exeAffect);
        (r.isValid === 1) ? $("[name='isValid']:eq(2)").prop("checked", true) : $("[name='isValid']:eq(3)").prop("checked", true);
    }


    // 操作方法 - 修改
    function update() {
        let b = false;

        let $planItem = $("[name='planItem']:eq(2)");
        let $planDate = $("[name='planDate']:eq(2)");
        let $exeAffect = $("[name='exeAffect']:eq(1)");

        if ($planItem.val() === '') {
            notify("mdi mdi-close", "项目计划为必填项!", "danger");
            $planItem.focus();
        } else if ($planDate.val() === '') {
            notify("mdi mdi-close", "计划时间为必填项!", "danger");
            $planDate.focus();
        } else if ($exeAffect.val() === '') {
            notify("mdi mdi-close", "执行结果为必填项!", "danger");
            $exeAffect.focus();
        } else {
            b = true;
        }


        if (b) {
            let obj = $("form:eq(2)").serializeArray();
            saveOrUpdate("${ctx}/dev-plan/update", obj)
        }
    }

    // 操作方法 - 开发失败/成功
    function dev(devResult) {
        let text = devResult === 1 ? "开发成功" : "开发失败"
        let color = devResult === 1 ? 'green' : 'red'
        $.confirm({
            title: '开发计划管理',      // 标题
            content: '确定要标记为' + text + '吗？',    // 内容
            type: color,        // 类型颜色
            icon: 'mdi mdi-alert-octagon-outline',   // 小图标
            typeAnimated: true, // 是否使用动画
            buttons: {          // 按钮
                confirm: {      // 确认按钮
                    text: '确认',
                    btnClass: 'btn-' + color,
                    action: function () {
                        let obj = {"id":${saleChance.id}, "devResult": devResult}
                        $.post("${ctx}/sale-chance/dev-result", obj, function (data) {
                            let loader = $('body').lyearloading({
                                opacity: 0.2,
                                spinnerSize: 'lg'
                            });
                            if (data.code === 200) {
                                setTimeout(function () {
                                    loader.destroy();
                                    notify("mdi mdi-check", data.message, "success");
                                }, 1e3);
                                setTimeout(function () {
                                    location.href = '${ctx}/page/dev-plan';
                                }, 3e3);
                            } else {
                                setTimeout(function () {
                                    loader.destroy();
                                    notify("mdi mdi-close", data.message, "danger");
                                }, 1e3);
                            }
                        });
                    }
                },
                cancel: {   // 取消按钮
                    text: '取消',
                    action: function () {
                    }
                }
            }
        });
    }
</script>
</html>
